<template>
  <div class="operation-menu-wrapper">
    <el-button type="success" icon="el-icon-upload" size="mini" plain @click="uploadFile">上传</el-button>
    <el-button class="m-l-10" type="primary" size="mini" plain @click="addFolder()">新建文件夹</el-button>
    <el-button type="warning" size="mini" plain @click="handlePublish()">博客批量发布</el-button>
    <el-button type="default" size="mini" plain @click="refreshTable()">刷新</el-button>

    <div v-if="selectionFile.length !== 0" style="display: inline-block;">
      <el-button size="mini" plain icon="el-icon-delete" @click="deleteSelectedFile()">删除</el-button>
      <el-button size="mini" plain icon="el-icon-edit" @click="moveSelectedFile()">移动</el-button>
      <el-button size="mini" plain icon="el-icon-download" @click="downloadSelectedFile()">下载</el-button>
    </div>

    <!-- 多选文件下载，页面隐藏 -->
    <template v-for="(item,index) in selectionFile">
      <a
        v-if="item.dir === false"
        :key="index"
        :ref="'downloadLink_' + index"
        target="_blank"
        :href="downloadUrl(item.path)"
        download
      />
    </template>

    <div class="storeDisWrapper" style="float:right;">
      占用空间 {{ storageValue }}
    </div>
  </div>
</template>

<script>
import BUS from '@/utils/bus'
import { createFolder, fileManageDelete } from '@/api/tool/file'
import { saveGroupBlog } from '@/api/blog/blog'
import { getAuthenticationHeader } from '@/utils/store'

export default {
  name: 'OperationMenu',
  props: {
    selectionFile: {
      type: Array,
      default: () => {
        return []
      }
    },
    operationFile: {
      type: Object,
      default: () => {
        return {}
      }
    },
    storageValue: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 当前查看的文件路径
    filePath: {
      get() {
        return this.$route.query.filePath
      },
      set() {
        return ''
      }
    },
    downloadUrl() {
      return function(value) {
        return encodeURI(this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/api/file/manage/download?path=${value}`)
      }
    }
  },
  methods: {
    // 新建文件夹按钮：打开模态框
    addFolder() {
      this.$prompt('请输入文件夹名称', '创建文件夹', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.createFile(value)
      }).catch(() => {
        this.$modal.msgWarning('取消创建文件夹')
      })
    },
    // 新建文件夹模态框-确定按钮
    createFile(fileName) {
      const param = {
        key: this.filePath,
        name: fileName
      }
      createFolder(param).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.$emit('getTableData')
      }).catch(() => {})
    },
    uploadFile() {
      BUS.$on('fileSuccess', response => {
        this.uploadFileSuccess(response)
        BUS.$off('fileSuccess')
      })
      BUS.$emit('openUploader', {
        authorization: getAuthenticationHeader(),
        path: this.filePath
      })
    },
    uploadFileSuccess(response) {
      if (response.code === 200) {
        this.$modal.msgSuccess('上传成功')
        this.$emit('getTableData')
        this.$emit('showStorage')
      } else {
        this.$modal.msgError(response.msg)
      }
    },
    handlePublish() {
      if (!this.filePath) {
        return
      }
      this.$prompt('请输入系列名称', '发布系列文章', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        saveGroupBlog({
          path: this.filePath,
          group: value
        }).then(response => {
          this.$modal.msgSuccess(response.msg)
        }).catch(() => {})
      }).catch(() => {
        this.$modal.msgWarning('取消发布系列文章')
      })
    },
    // 批量操作-删除按钮
    deleteSelectedFile() {
      if (this.selectionFile.length > 0) {
        const q = []
        for (let i = 0; i < this.selectionFile.length; i++) {
          // 批量删除接口
          q.push(fileManageDelete({ key: this.selectionFile[i].path }))
        }
        const that = this
        this.$http.all(q).then(this.$http.spread(function(response) {
          that.$modal.msgSuccess(response.msg)
          that.$emit('getTableData')
          that.$emit('showStorage')
        }))
      }
    },
    // 批量操作-移动按钮
    moveSelectedFile() {
      this.$emit('showFileTreeDialog', true)
    },
    // 批量操作：下载按钮
    downloadSelectedFile() {
      for (let i = 0; i < this.selectionFile.length; i++) {
        const name = 'downloadLink_' + i
        this.$refs[name][0].click()
      }
    },
    refreshTable() {
      this.$emit('getTableData')
      this.$emit('showStorage')
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-menu-wrapper {
  height: 60px;
  line-height: 60px;
  .upload-demo {
    display: inline-block;
  }
  .el-button--medium {
    margin-left: 10px;
  }
}
</style>
